<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>粗略计算</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			td {
				text-align: center;
				padding: 5px 0;
			}
			
			#mainTable th {
				line-height: 40px;
			}
			
			#mainTable tr {
				border-bottom: 1px solid #ccc;
			}
			.bottom{
				line-height: 40px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">粗略计算</h1>
		</header>
		<div class="mui-content">
			<table id="mainTable" class="mui-table">
				<thead>
					<tr>
						<th>1.0 LV</th>
						<th style="width: 120px;">数量</th>
						<th>2.0 LV</th>
						<th>累积LV</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td colspan="4" class="bottom">
							hero总数<span id="sum">0</span>个 2.0账户等级
							<span id="sumLv">-65</span>
						</td>
					</tr>
				</tbody>

			</table>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var lv1Arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
				var lv2Arr = [1, 2, 3, 4, 5, 6, 7, 8, 11, 15, 20, 24, 28, 32, 37, 41, 45, 50, 54, 58];
				var table = document.querySelector('#mainTable tbody');

				lv1Arr.forEach(function(item, index) {
					var row = table.insertRow(index);
					row.insertCell(0).innerHTML = item;
					row.insertCell(1).innerHTML = '<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="65">' +
						'<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>' +
						'<input class="mui-numbox-input" type="number" value="0"/>' +
						'<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>' +
						'</div>';
					row.insertCell(2).innerHTML = lv2Arr[index];
					row.insertCell(3).innerHTML = 0;
				})
				// 动态添加的Numbox组件需要手动初始化
				mui('.mui-numbox').numbox();
				
				//绑定onchange事件
				var numberBoxes = document.querySelectorAll('.mui-numbox-input');
				for(var i = 0; i < numberBoxes.length; i++) {
					numberBoxes[i].onchange = function() {
						var tr = this.parentElement.parentElement.parentElement;
						var lv2 = tr.cells[2].innerHTML;
						var count = this.value;
						tr.cells[3].innerHTML = Number(count) * Number(lv2);

						//总数量
						document.getElementById('sum').innerHTML = getHeroCount();
						//总lv
						document.getElementById('sumLv').innerHTML = getSumLv();

					}
				}

				function getHeroCount() {
					var numberBoxes = document.querySelectorAll('.mui-numbox-input');
					var count = 0;
					for(var i = 0; i < numberBoxes.length; i++) {
						count += Number(numberBoxes[i].value);
					}
					return count;
				}

				function getSumLv() {
					var numberBoxes = document.querySelectorAll('.mui-numbox-input');
					var sumLv = -65;
					for(var i = 0; i < numberBoxes.length; i++) {
						sumLv += Number(numberBoxes[i].value) * lv2Arr[i];
					}
					return sumLv;
				}
			}
		</script>
	</body>

</html>